<template>
  <div class="box">
    <div class="content r">
      <a-switch v-model="isOpen" :loading="loading" :size="size" :disabled="disabled" @click="onClick" />
    </div>
    <div class="content">
      <div class="flexc">
        <a-tooltip placement="bottom">
          <template slot="title">
            <span>控制大屏数据是否与系统实时数据一致，“开”与系统保持一致，“关”与系统断开同步</span>
          </template>
          <div>
            <span class="title" style="margin-right: 5px">同步系统数据</span>
            <a-icon type="exclamation-circle" style="color: #ffcb00" />
          </div>
        </a-tooltip>
      </div>
      <div v-if="syncTime && isOpen" class="syncTime">同步时间：{{ syncTime }}</div>
    </div>
  </div>
</template>
<script>
import moment from 'moment'
import { httpAction,getAction } from '@/api/manage'
export default {
  props: {
    defaultState: {
      type: Boolean,
      default: false,
    },
    type: {
      type: [String, Number],
      require: true,
    },
    size: {
      type: String,
      default: 'default',
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      loading: false,
      isOpen: false,
      syncTime: '',
    }
  },
  watch: {
    isOpen(newVal, oldVal) {
      this.$emit('update:defaultState', newVal)
    },
  },
  created() {
    if(this.type===1){
      this.getDpJobSwitch()
    }else if(this.type===2){
      this.getDpJobSwitch1()
    }else{
      this.getDpJobSwitch2()
    }
  },
  methods: {
    // 获取线上供需同步状态
    getDpJobSwitch() {
      getAction(
        '/supplyDemand/queryDetail',
      ).then((res) => {
        if (res.success && res.result) {
          this.isOpen = res.result.isOpen
          this.syncTime = res.result.updateTime
          this.$emit('update:defaultState', this.isOpen)
        }
      })
    },
    // 获取果树资源数字化同步状态
    getDpJobSwitch1() {
      getAction(
        '/loquat/tqppResourceStatistics/queryOne',
      ).then((res) => {
        if (res.success && res.result) {
          this.isOpen = res.result.synFlag===1?true:false
          this.syncTime = res.result.updateTime
          this.$emit('update:defaultState', this.isOpen)
        }
      })
    },
    // 获取农事实施情况同步状态
    getDpJobSwitch2() {
      getAction(
        '/loquat/tqppAgriculturalActivities/list',
      ).then((res) => {
        if (res.success && res.result) {
          this.isOpen = res.result.synFlag==='1'?true:false
          console.log(this.isOpen);
          // this.syncTime = res.result.updateTime
          this.$emit('update:defaultState', this.isOpen)
        }
      })
    },
    switchChangeFun() {
      const nowTime = moment().format('YYYY-MM-DD HH:mm:ss')
      this.loading = true
      httpAction(
        '/supplyDemand/updateById',
        {
          isOpen: !this.isOpen
        },
        'post'
      ).then((res) => {
        if (res.success) {
          this.syncTime = nowTime
          this.loading = false
          this.$message.success(res.message)
          this.getDpJobSwitch()
        } else {
          this.loading = false
          this.$message.warning(res.message)
        }
      })
    },
    switchChangeFun1() {
      const nowTime = moment().format('YYYY-MM-DD HH:mm:ss')
      this.loading = true
      httpAction(
        '/loquat/tqppResourceStatistics/editSynFlag',{},'put'
      ).then((res) => {
        if (res.success) {
          this.syncTime = nowTime
          this.loading = false
          this.$message.success(res.message)
          this.getDpJobSwitch1()
        } else {
          this.loading = false
          this.$message.warning(res.message)
        }
      })
    },
    switchChangeFun2() {
      const nowTime = moment().format('YYYY-MM-DD HH:mm:ss')
      this.loading = true
      httpAction(
        '/loquat/tqppAgriculturalActivities/editSynFlag',{},'put'
      ).then((res) => {
        if (res.success) {
          this.syncTime = nowTime
          this.loading = false
          this.$message.success(res.message)
          this.getDpJobSwitch2()
        } else {
          this.loading = false
          this.$message.warning(res.message)
        }
      })
    },
    onClick() {
      this.isOpen = !this.isOpen
      this.$confirm({
        title: this.isOpen ? '是否要断开系统实时数据？' : '是否要同步系统实时数据？',
        content: (h) => (
          <div style="color:red;">
            {this.isOpen ? '若断开，后台数据不再随系统更新。' : '若同步，会覆盖后台当前数据。'}
          </div>
        ),
        okText: this.isOpen ? '是，断开' : '是，同步',
        cancelText: this.isOpen ? '否，暂不断开' : '否，暂不同步',
        onOk: () => {
          if(this.type===1){
            this.switchChangeFun()
          }else if(this.type===2){
            this.switchChangeFun1()
          }else{
             this.switchChangeFun2()
          }
        },
        onCancel: () => {},
        class: 'test',
        icon:()=>(<a-icon type="exclamation-circle" style="color: #ffcb00" />)
      })
    },
  },
}
</script>
<style lang="less" scoped>
.flexc {
  display: flex;
  align-items: center;
  justify-content: center;
}
.box {
  display: flex;
  .r {
    align-items: flex-end;
    margin-right: 15px;
    .ico {
      margin-top: 10px;
    }
  }
  .content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    .syncTime {
      margin-top: 6px;
      font-size: 12px;
      color: #333333;
      font-weight: 400;
      font-style: normal;
    }
    .title {
      letter-spacing: normal;
      color: #333333;
      font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
      font-weight: 700;
      font-style: normal;
    }
  }
}
</style>
